<template>
  <div
    class="pos-list"
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(255, 255, 255, 0.8)"
  >
    <el-row>
      <el-col :span="8" class="pos-order" id="order-list">
        <!-- 标签页 -->
        <el-tabs tab-position="top" v-model="activeName">
          <el-tab-pane prop="goodsName" label="点餐" name="diancan">
            <!-- 表格 -->
            <el-table :data="tableData" border sum-text="合计嘤">
              <el-table-column
                :resizable="isResizable"
                prop="goodsName"
                label="商品"
                min-width="100%"
              >
              </el-table-column>
              <el-table-column
                sortable
                prop="count"
                label="数量"
                min-width="60%"
              >
              </el-table-column>
              <el-table-column prop="price" label="价格" min-width="60%">
              </el-table-column>
              <el-table-column label="操作" fixed="right" min-width="100%">
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    size="mediumn"
                    @click="deleteSingleGoods(scope.row)"
                    >删除</el-button
                  >
                  <el-button
                    type="text"
                    size="mediumn"
                    @click="addGoods(scope.row)"
                    >增加</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <!-- 统计数量/价格 -->
            <div class="totalHandle">
              <small>总件数：</small><span class="count">{{ totalCount }}</span
              >件 <small>总金额：</small
              ><span class="money">{{ totalMoney }}</span
              >元
            </div>
            <!-- 三个功能按钮 -->
            <el-row id="buttons">
              <el-button type="warning" size="medium">挂单</el-button>
              <el-button type="danger" size="medium" @click="deleteAllGoods"
                >删除</el-button
              >
              <el-button type="success" size="medium" @click="checkout"
                >结账</el-button
              >
            </el-row>
          </el-tab-pane>
          <el-tab-pane prop="count" label="挂单" name="guadan"
            >配置管理</el-tab-pane
          >
          <el-tab-pane prop="price" label="外卖" name="waimai"
            >角色管理</el-tab-pane
          >
          <el-tab-pane prop="price" label="操作" name="caozuo">
            操作
          </el-tab-pane>
        </el-tabs>
      </el-col>
      <el-col :span="16" class="pos-goods">
        <!-- 常用商品栏目 -->
        <h2 class="common_good">常用商品</h2>
        <div class="good_list">
          <ul>
            <li
              @click="addGoods(oftenGood)"
              v-for="oftenGood in oftenGoods"
              :key="oftenGood.goodsId"
            >
              <span class="title">{{ oftenGood.goodsName }}</span>
              <span class="price">￥{{ oftenGood.price }}元</span>
            </li>
          </ul>
        </div>
        <!-- 标签页栏目 -->
        <el-tabs class="tabs-column" v-model="activeName2">
          <el-tab-pane class="tabs-item" label="汉堡" name="hamburger">
            <ul>
              <li
                @click="addGoods(typeGood)"
                v-for="typeGood in type0Goods"
                :key="typeGood.goodsId"
              >
                <img :src="typeGood.goodsImg" width="120" height="120" />
                <div class="good-text">
                  <span class="title">{{ typeGood.goodsName }}</span>
                  <span class="price">￥{{ typeGood.price }}元</span>
                </div>
              </li>
            </ul>
          </el-tab-pane>
          <el-tab-pane class="tabs-item" label="小食" name="snack">
            <ul>
              <li
                @click="addGoods(typeGood)"
                v-for="typeGood in type1Goods"
                :key="typeGood.goodsId"
              >
                <img :src="typeGood.goodsImg" width="120" height="120" />
                <div class="good-text">
                  <span class="title">{{ typeGood.goodsName }}</span>
                  <span class="price">￥{{ typeGood.price }}元</span>
                </div>
              </li>
            </ul>
          </el-tab-pane>
          <el-tab-pane class="tabs-item" label="饮料" name="drink">
            <ul>
              <li
                @click="addGoods(typeGood)"
                v-for="typeGood in type2Goods"
                :key="typeGood.goodsId"
              >
                <img :src="typeGood.goodsImg" width="120" height="120" />
                <div class="good-text">
                  <span class="title">{{ typeGood.goodsName }}</span>
                  <span class="price">￥{{ typeGood.price }}元</span>
                </div>
              </li>
            </ul>
          </el-tab-pane>
          <el-tab-pane class="tabs-item" label="套餐" name="meal">
            <ul>
              <li
                @click="addGoods(typeGood)"
                v-for="typeGood in type3Goods"
                :key="typeGood.goodsId"
              >
                <img :src="typeGood.goodsImg" width="120" height="120" />
                <div class="good-text">
                  <span class="title">{{ typeGood.goodsName }}</span>
                  <span class="price">￥{{ typeGood.price }}元</span>
                </div>
              </li>
            </ul>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "pos",
  data() {
    return {
      isResizable: false,
      loading: true,
      activeName: "diancan",
      activeName2: "hamburger",
      tableData: [],
      oftenGoods: [],
      type0Goods: [],
      type1Goods: [],
      type2Goods: [],
      type3Goods: [],
      totalCount: 0,
      totalMoney: 0,
    };
  },
  // computed
  computed: {
    // this.tableData.forEach((item) => {
    //   this.totalCount += item.count;
    //   this.totalMoney += parseInt(item.count) * parseInt(item.price);
    // });
  },
  // methonds
  methods: {
    // 统计总数和总金额
    getTotalFunc() {
      // 每一次进来之前都清零，这一步很重要
      this.totalCount = 0;
      this.totalMoney = 0;

      this.tableData.forEach((item) => {
        this.totalCount += item.count;
        this.totalMoney += item.count * item.price;
      });
    },
    // 点击商品加入购物车
    addGoods(goods) {
      // 1.判断原数据中tableData是否有这个商品id
      let isExist = false;
      this.tableData.forEach((item) => {
        item.goodsId === goods.goodsId ? (isExist = true) : null;
      });
      // 2.如果有，则数量+1，反之把商品添加到原数据tableData中
      if (!isExist) {
        let goodParams = {
          goodsId: goods.goodsId,
          goodsName: goods.goodsName,
          price: goods.price,
          count: 1,
        };
        this.tableData.push(goodParams);
      } else {
        let arr = this.tableData.filter(
          (item) => item.goodsId === goods.goodsId
        );
        arr[0].count++;
      }
      // 统计总数量和总金额
      this.getTotalFunc();
    },
    // 删除当个商品
    deleteSingleGoods(goods) {
      this.tableData = this.tableData.filter(
        (item) => item.goodsId !== goods.goodsId
      );
      this.getTotalFunc();
    },
    // 删除全部商品
    deleteAllGoods() {
      if (this.tableData && this.totalMoney && this.totalCount) {
        this.tableData = [];
        this.totalMoney = 0;
        this.totalCount = 0;
      }
    },
    // 模拟结账
    checkout() {
      if (this.tableData.length > 0) {
        // 同时清空购物车中的数据
        this.tableData = [];
        this.totalCount = 0;
        this.totalMoney = 0;

        this.$message({
          message: "结账成功，祝您用餐愉快！",
          type: "success",
        });
      } else {
        this.$message.error("当前购物车无商品，请去添加后再结账购买！");
      }
    },
  },
  async created() {
    try {
      let oftenGoodsResult = await axios.get(
        "https://www.fastmock.site/mock/0bf6a5bae7eab8507e44b56191ddff36/vuepos/oftenGoods"
      );
      let typeGoodsResult = await axios.get(
        "https://www.fastmock.site/mock/0bf6a5bae7eab8507e44b56191ddff36/vuepos/typeGoods"
      );
      // 请求到数据后，让加载图标消失
      if (oftenGoodsResult && typeGoodsResult) {
        this.loading = false;
      }
      this.oftenGoods = oftenGoodsResult.data.oftenGoods;
      this.type0Goods = typeGoodsResult.data.data[0];
      this.type1Goods = typeGoodsResult.data.data[1];
      this.type2Goods = typeGoodsResult.data.data[2];
      this.type3Goods = typeGoodsResult.data.data[3];
      // console.log(typeGoodsResult.data.data[0]);
    } catch (err) {
      alert("网络错误,请重试！");
    }
  },
  mounted: function() {
    // var orderHeight = document.body.clientHeight;
    // document.getElementById("order-list").style.height = orderHeight + "px";
  },
};
</script>

<style lang="less">
.iconfont {
  font-size: 42px;
}
.pos-list {
  width: 90%;
  box-sizing: border-box;
  // overflow: hidden;
  .pos-order {
    height: 100vh;
    // background: #16a085;
    border-right: 1px solid #ccc;
    box-sizing: border-box;
    .totalHandle {
      background: #f5f7fa;
      padding: 20px 0;
      small {
        font-weight: 500;
        &:nth-child {
          text-indent: 10px;
          color: red;
          margin-left: 45px;
        }
      }
      .count {
      }
      .money {
      }
    }
    #buttons {
      margin-top: 20px;
      text-align: center;
    }
  }
  .pos-goods {
    // height: 100vh;
    box-sizing: border-box;
    .common_good {
      text-align: left;
      font-weight: 400;
      font-size: 18px;
      border-bottom: 1px solid #ccc;
      box-sizing: border-box;
      padding: 8px 10px;
    }
    .good_list {
      padding: 20px 40px;
      background: #f5f7fa;
      ul {
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        li {
          padding: 10px 8px;
          margin: 10px 6px;
          background: #fff;
          cursor: pointer;
          .title {
            font-size: 18px;
            padding-right: 2px;
            color: #2e526a;
          }
          .price {
            font-weight: 700;
            color: #409eff;
          }
        }
      }
    }
    .tabs-column {
      .tabs-item {
        background: #f5f7fa;
        padding: 0 10px;
        box-sizing: border-box;
        ul {
          display: flex;
          flex-wrap: wrap;
          justify-content: flex-start;
          li {
            display: flex;
            padding: 10px 8px;
            margin: 10px 6px;
            cursor: pointer;
            .good-text {
              display: flex;
              flex-direction: column;
              justify-content: flex-start;
              text-align: left;
              .title {
                font-size: 20px;
                font-weight: 700;
                padding: 10px 4px;
              }
              .price {
                font-size: 18px;
                color: #409eff;
              }
            }
          }
        }
      }
    }
  }
}

// 修改element默认样式
.el-tabs__nav-scroll {
  padding-left: 10px;
}
.el-tabs__item,
.el-tabs__item.is-active {
  font-size: 16px;
}
.el-table thead {
  background: #f5f7fa;
}
</style>
